<!--
 * @Author: your name
 * @Date: 2021-03-16 15:09:41
 * @LastEditTime: 2022-01-20 14:19:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\components\dashboard\LiveChart.vue
-->
<template>
    <div
        v-resize="myChart"
        style="height: 400px; margin-top: 20px"
        ref="liveChart"
    ></div>
</template>

<script setup>
import * as echarts from "echarts/core";
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
} from "echarts/components";
import { BarChart, PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import * as dayjs from "dayjs";
import { unwarp } from "@/utils";
import { onMounted, ref, onUnmounted } from "vue";

/**
 * @description: 生成20条数据
 * @param {*}
 * @return {*}
 */
const dataList = () => {
    let date = [];
    let num = [];
    let nowTime = new Date().getTime();
    for (let i = 0; i < 30; i++) {
        date.push(dayjs(nowTime - i * 1000).format("HH:mm:ss"));
        num.push((Math.random() * 10).toFixed(0) * 1);
    }
    return {
        date: date.reverse(),
        num,
    };
};

echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    BarChart,
    CanvasRenderer,
    LegendComponent,
    PieChart,
]);
const liveChart = ref(null);
const myChart = ref(null);
let timer = null;

let $_dataList = dataList();

let option = {
    //     title: {
    //         text: "用户访问量",
    //     },
    tooltip: {
        trigger: "item",
    },
    legend: {
        top: "5%",
        left: "center",
    },
    series: [
        {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
            },
            label: {
                show: false,
                position: "center",
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: "40",
                    fontWeight: "bold",
                },
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
            ],
        },
    ],
};

const getDataList = async (myChart) => {
    let arr = [];

    let d = await VE_API.system.dekiver();
    let dList = d.data.pair;

    let p = {
        pagenum: 1,
        pagesize: 20,
    };
    const { code, data } = await VE_API.system.userList(p);

    dList.forEach(
        (item) => (item.name = data.data.find((u) => u.id === item.id)["name"])
    );

    option.series[0].data = dList.map((item) => ({
        name: item.name,
        value: item.fee,
    }));

    console.log(option.series[0].data);
    unwarp(myChart.value).setOption(option);

    return arr;
};
// let option = {
//     title: {
//         text: "用户访问量",
//     },
//     grid: {
//         left: "0",
//         right: "0",
//         top: "10%",
//         bottom: "0",
//         containLabel: true,
//     },
//     tooltip: {
//         trigger: "axis",
//     },
//     xAxis: {
//         data: $_dataList.date,
//     },
//     yAxis: {
//         type: "value",
//     },
//     series: [
//         {
//             data: $_dataList.num,
//             type: "bar",
//             showBackground: true,
//             backgroundStyle: {
//                 color: "rgba(180, 180, 180, 0.2)",
//             },
//         },
//     ],
// };

/**
 * @description: 动态数据
 * @param {*}
 * @return {*}
 */
const getNewData = (myChart) => {
    unwarp(myChart.value).setOption(option);

    timer = setInterval(() => {
        $_dataList.date.shift();
        $_dataList.num.shift();
        $_dataList.date.push(dayjs(new Date().getTime()).format("HH:mm:ss"));
        $_dataList.num.push((Math.random() * 10).toFixed(0) * 1);
        unwarp(myChart.value).setOption(option);
    }, 1000);
};
onMounted(() => {
    myChart.value = echarts.init(liveChart.value);
    // getNewData(myChart);
    getDataList(myChart);
});
onUnmounted(() => {
    unwarp(myChart.value).dispose();
    clearInterval(timer);
    timer = null;
});
</script>

<style lang="scss" scoped></style>
